<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<script type="text/javascript" src="/js/plupload.full.min.js"></script>
<script src="/js/jquery.js"></script>
<style>
.avatar_uplpad_btn,#avatar_uplpad {
    background: url("avatar_uplpad_btn.png") no-repeat scroll 0 0;
    display: inline-block;
    height: 30px;
    width: 82px;
    margin-top: 5px;
}
</style>
</head>
<body>


              <div class="li">
                 <li class="member_tit">上传作品         </li>
                  <li class="member_inp t_data">
                    <div id="imgbody" ></div>
                  <input  type="hidden"  id="production" name="images"  >
                  <div class="avatar_area" style="margin:0px 0 20px auto;">
                      <a href="javascript:void(0);" class="avatar_uplpad_btn" id="avatar_uplpad_btn" onclick="imgnum()"></a>
                      <a href="javascript:void(0);" class="avatar_uplpad_btnz"  onclick="imgclear()"></a>
                      <div id="loading_bar" style="display:none">
                          <p id="updesc">上传中...</p>
                          <span class="loading_bar"><em id="percent" style="width: 27%;"></em></span>
                          <span id="percentnum">27%</span>
                      </div>
                  </div>
                  <div class="resef" onclick="imgshow()">
                  (你已成功上传作品内容，并且达到上传作品内容的数量限制，如需重新上传请点此红框。此操作会清空已上传的作品内容。)。
                  <input type="hidden" id="imgjs" value="0">
                  </div>
                  </li>
                  
                 <li class="member_ts">作品提交格式为JPG/PNG/JPEG/GIF/PDF/MP3/MP4/WORD。
                 (PDF格式：PDF≤50MB，比例为16：9；JPG格式：不超过10张，单张JPG≤20M，MP4格式：≤300MB，H.264标准视频编码，码率在1024以下；)
                  <br><small>The submission format is JPG/PNG/JPEG/GIF/PDF/MP3/MP4/WORD.</small>
                  </li>
                  <span class="t_data_p to"></span>
              </div>


              <div class="li">
                 <li class="member_tit">上传封面<i>(封面只有一个，新上传的图片会覆盖之前的上传图片)</i></li>
                  <li class="member_inp t_face">
                   <div id="face_img"></div>
                  <input  type="hidden"  id="face">
                   <div class="avatar_area" style="margin:0px 0 20px auto;">
                       <a href="javascript:void(0);" class="avatar_uplpad0" id="avatar_uplpad"></a>
                       <a href="javascript:void(0);" class="avatar_uplpa1" onclick="fmclear()"></a>
                       <div id="loading" style="display:none">
                           <p id="updesc">上传中...</p>
                           <span class="loading_bar"><em id="percent" style="width: 27%;"></em></span>
                           <span id="percentnum">27%</span>
                       </div>
                   </div>
                  </li>
                  
                 <li class="member_ts">封面尺寸比例为16：9，宽度220px以上，文件大小＜2MB。该封面文件内容不设限但不得透露个人、学校等与参赛者相关信息。
                  <br><small>Cover size ratio is 16:9, width 220 px, file size < 2MB. The content of the cover document is unlimited, but the relevant information of individuals, schools and other participants shall not be disclosed.</small>
                  </li>
                  <span class="t_face_p to"></span>
              </div>            




<script>

//默认选择
//$("#fb2,#hj2,#tp1,#px2").attr("checked","checked");




//上传作品
 
  var uploader_avatar = new plupload.Uploader({
    runtimes: 'gears,html5,html4,silverlight,flash', //上传插件初始化选用那种方式的优先级顺序
    browse_button: ['avatar_uplpad_btn'], // 上传按钮
    url: "/upload/file", //远程上传地址
    flash_swf_url: '/js/file/plugins/plupload/Moxie.swf', //flash文件地址
    silverlight_xap_url: '/js/file/plugins/plupload/Moxie.xap', //silverlight文件地址
    filters: {
        max_file_size: '10000mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
        mime_types: [//允许文件上传类型
            {title: "files", extensions: "jpeg,jpg,mp4,pdf,mp3,doc,docx,png"}
        ]
    },
    multi_selection: true, //true:ctrl多文件上传, false 单文件上传
    init: {
        FilesAdded: function(up, files) { //文件上传前
            $("#avatar_pic").hide();
            $("#loading_bar").show();
            uploader_avatar.start();
        },
        UploadProgress: function(up, file) { //上传中，显示进度条

            var percent = file.percent;
            $("#percent").css({"width": percent + "%"});
            $("#percentnum").text(percent + "%");
        },
        FileUploaded: function(up, file, info) { //文件上传成功的时候触发
            var data = eval("(" + info.response + ")");//解析返回的json数据
            
           
             alert(data.error);
            
            
            var onum=Number($("#imgjs").val());
            var oop=$("#imgjs").val(onum+1);
            var rsjs=Number($("#imgjs").val());

             if(rsjs<=10)
             {
               //alert((data.pic.split("."))['1']);判断作品类型
               var typez=(data.pic.split("."))['1'];
                 if(typez=="jpg"||typez=="png"||typez=="jpeg"||typez=="gif"){
                   $("#imgbody").append("<li><img  src='/" + data.pic + "'/><span>"+data.name+"</span></li>");
                 }
                 if(typez=="mp4"){
                   $("#imgbody").append("<video  src='/" + data.pic + "' controls='true'></video>");
                 }
                 if(typez=="pdf"){
                   $("#imgbody").append("<a href='/"+data.pic+"' target='_blank'>点击查看上传的pdf</a>");
                 }
                 if(typez=="mp3"){
                   $("#imgbody").append("<audio  src='/" + data.pic + "' controls='true'></audio>");
                 }

                 
          
                 $("#production").val($("#production").val()+'/'+data.pic+',');
                 $("#loading_bar").hide();
                 $("#avatar_pic").show();
                 imgnum();//执行数量检测


             }
             
          
           
        },
        Error: function(up, err) { //上传出错的时候触发
            alert(err.message);
            $("#loading_bar").hide();
        },
       
    }
});





//上传封面

var uploader_fm = new plupload.Uploader({
    runtimes: 'gears,html5,html4,silverlight,flash', //上传插件初始化选用那种方式的优先级顺序
    browse_button: ['avatar_uplpad'], // 上传按钮
    url: "/upload/file", //远程上传地址
    flash_swf_url: '/js/file/plugins/plupload/Moxie.swf', //flash文件地址
    silverlight_xap_url: '/js/file/plugins/plupload/Moxie.xap', //silverlight文件地址
    filters: {
        max_file_size: '10mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
        mime_types: [//允许文件上传类型
            {title: "files", extensions: "jpg,png,gif,jpeg"}
        ]
    },
    multi_selection: false, //true:ctrl多文件上传, false 单文件上传
    init: {
        FilesAdded: function(up, files) { //文件上传前
            $("#avatar").hide();
            $("#loading").show();
            uploader_fm.start();

        },
        UploadProgress: function(up, file) { //上传中，显示进度条

            var percent = file.percent;
            $("#percent").css({"width": percent + "%"});
            $("#percentnum").text(percent + "%");
        
        },
        FileUploaded: function(up, file, info) { //文件上传成功的时候触发
            var data = eval("(" + info.response + ")");//解析返回的json数据
            $("#face_img").html("<img  src='/" + data.pic + "'/>");
            $("#face").val('/'+data.pic);
            $("#loading").hide();
            $("#avatar").show();
        },
        Error: function(up, err) { //上传出错的时候触发
            alert(err.message);
            $("#loading_bar").hide();
        }
    }
});
uploader_avatar.init();
uploader_fm.init();


function imgnum()
{
    var num=Number($("#imgbody img").size());

   
    if(num>=10)
    {
        $("#avatar_uplpad_btn,.avatar_uplpad_btnz").hide();
        $(".resef").show();
    }
    else{
       $("#avatar_uplpad_btn,.avatar_uplpad_btnz").show();
       $(".resef").hide();
    }
}


function imgshow()
{
        var xxx='';
        $("#imgbody").html(xxx);
        $("#production").val(xxx);
        $("#imgjs").val(0);
        $("#avatar_uplpad_btn").show();
        $(".avatar_uplpad_btnz").show();
        $(".resef").hide();

}


function city(u,n){
$.ajax({
        url:'/member/city',
        type:'post',
        data:'city='+u,
        success:function(s){
         $(".xx ul").html('');
         $("#in_city").val(n);
         $("#ct").html(n);
         $(".cs").hide();
         var r=JSON.parse(s);
       $.each(r,function(i,vl){ 

        $(".xx ul").append("<li onclick=\"school('"+vl.id+"','"+vl.name+"')\">"+vl.name+"</li>");

       })

        }
    })
}



   function isPhoneAvailable(phonevalue){
    var phoneReg = /^1[3-56789]\d{9}$/;
       if(phoneReg.test(phonevalue)){
           return true;
       }else{
           return false;
       }
   }

</script>
  
</body>
</html>
